<script setup lang="ts">
import { ref } from 'vue';

// 定义响应式变量
const form = ref({
  scheduler_name: 'ced-scheduler',
  task_name: '',
  image: '',
  replica: 0,
  resources: {
    cpu: '',
    memory: '',
    gpu: ''
  },
  fs_files: [
    { name: '', path: '' }, // 初始一组
    { name: '', path: '' }
  ]
});

const dialogVisible = ref(false);
const dialogMessage = ref('');

// 提交数据时组织 JSON
function getFormData() {
  // 输出格式化的 JSON 数据
  const result = {
    scheduler_name: form.value.scheduler_name,
    task_name: form.value.task_name,
    image: form.value.image,
    resources: {
      cpu: form.value.resources.cpu,
      memory: form.value.resources.memory,
      gpu: form.value.resources.gpu
    },
    fs_files: form.value.fs_files.filter(
      (fs) => fs.name && fs.path // 过滤掉未填写完整的项
    ),
    replica: Number(form.value.replica)
  };
  fetchsubmitTask(result);
  //console.log(JSON.stringify(result, null, 2)); // 打印 JSON
  return result; // 返回 JSON 对象
}

function fetchsubmitTask(data: object) {
  fetch(`/api/v1/task/submit`, {
    method: 'POST', // 请求方法
    headers: {
      'Content-Type': 'application/json' // 请求体类型，JSON
    },
    body: JSON.stringify(data) // 将数据对象转换为 JSON 字符串
  })
    .then((response) => response.json()) // 假设返回的是 JSON 格式的数据
    .then((responseData) => {
      console.log(
        'Task submitted successfully:',
        responseData,
        responseData.msg
      );
      if (responseData.msg == 'Task submitted successfully') {
        console.log('yes!');
        if (responseData.msg === 'Task submitted successfully') {
          // 设置对话框消息并显示
          dialogMessage.value = '提交任务成功';
          dialogVisible.value = true;
        } else {
          // 设置错误消息并显示
          dialogMessage.value = '提交任务失败';
          dialogVisible.value = true;
        }
      }
    })
    .catch((error) => {
      console.error('Error submitting task:', error);
      dialogMessage.value = '提交任务时发生错误';
      dialogVisible.value = true;
    });
}
</script>

<template>
  <v-card class="pa-4">
    <!-- 表单字段 -->
    <v-row>
      <v-label> 一.填写基础信息 </v-label>
    </v-row>
    <v-row>
      <v-col cols="12" sm="6">
        <v-select
          v-model="form.scheduler_name"
          label="调度器名"
          :items="['ced-scheduler', 'k8s-scheduler']"
        />
      </v-col>
      <v-col cols="12" sm="6">
        <v-text-field
          v-model="form.task_name"
          label="任务名"
          hide-details="auto"
          required
        />
      </v-col>

      <v-col cols="12" sm="6">
        <v-text-field
          v-model="form.image"
          label="镜像名"
          hide-details="auto"
          required
        />
      </v-col>

      <v-col cols="12" sm="6">
        <v-text-field
          v-model="form.replica"
          label="副本数"
          type="number"
          hide-details="auto"
          required
        />
      </v-col>
    </v-row>
    <v-row>
      <v-divider
        :thickness="0"
        class="border-opacity-100 mt-6 mb-6"
        color="info"
      />
    </v-row>
    <v-row>
      <v-label> 二.填写资源分配申请信息 </v-label>
    </v-row>
    <!-- 资源字段 -->
    <v-row>
      <v-col cols="12" sm="4">
        <v-text-field
          v-model="form.resources.cpu"
          label="CPU"
          type="text"
          hide-details="auto"
          required
        />
      </v-col>

      <v-col cols="12" sm="4">
        <v-text-field
          v-model="form.resources.gpu"
          label="GPU"
          type="text"
          hide-details="auto"
        />
      </v-col>

      <v-col cols="12" sm="4">
        <v-text-field
          v-model="form.resources.memory"
          label="内存"
          type="text"
          hide-details="auto"
        />
      </v-col>
    </v-row>

    <v-row>
      <v-divider
        :thickness="0"
        class="border-opacity-100 mt-6 mb-6"
        color="info"
      />
    </v-row>
    <v-row>
      <v-label> 三.填写数据文件信息 </v-label>
    </v-row>
    <!-- 动态 FS Files -->
    <v-row>
      <v-col
        v-for="(fs, index) in form.fs_files"
        :key="index"
        cols="12"
        class="d-flex align-center"
      >
        <v-text-field
          v-model="fs.name"
          label="数据文件名"
          hide-details="auto"
          class="me-4"
        />
        <v-text-field
          v-model="fs.path"
          label="数据文件路径"
          hide-details="auto"
          class="me-4"
        />
        <v-btn icon @click="form.fs_files.splice(index, 1)">
          <v-icon>mdi-delete</v-icon>
        </v-btn>
      </v-col>
    </v-row>

    <!-- 添加按钮 -->
    <v-row>
      <v-col cols="12" class="text-right">
        <v-btn
          color="primary"
          variant="outlined"
          @click="form.fs_files.push({ name: '', path: '' })"
        >
          添加额外数据文件
        </v-btn>
      </v-col>
    </v-row>

    <!-- 提交按钮 -->
    <v-row>
      <v-col cols="12" class="text-right">
        <v-btn color="success" @click="getFormData"> 提交任务 </v-btn>
      </v-col>
    </v-row>

    <v-dialog v-model="dialogVisible" max-width="500px">
      <v-card>
        <v-card-title> 提交结果 </v-card-title>
        <v-card-text>
          {{ dialogMessage }}
        </v-card-text>
        <v-card-actions>
          <v-btn color="primary" @click="dialogVisible = false"> 关闭 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-card>
</template>
